
<script setup lang="ts">
import { useRouter, useRoute, RouterLink, RouterView } from 'vue-router';
import { ref, onMounted, computed } from 'vue';
import {
  PieChart,
  Memo,
  Finished,
  Bell,
  DataLine,
  House,
  Document,
  Warning,
  Tickets,
  DocumentRemove,

  Menu as IconMenu,
  Location,
  Setting,
  Expand,
  Edit
} from '@element-plus/icons-vue';

const router = useRouter();
const route = useRoute();

// 获取完整的路由配置信息，这里假设路由配置已经导出为一个变量，你可根据实际情况调整引入方式
const routes = computed(() => router.options.routes);

const getIconComponent = (iconName?: string | any) => {
  
    if (iconName === 'PieChart') {
        return PieChart;
    } else if (iconName === 'Memo') {
        return Memo;
    } else if (iconName === 'Finished') {
        return Finished;
    } else if (iconName === 'Bell') {
        return Edit;
    } else if (iconName === 'DataLine') {
        return DataLine;
    } else if (iconName === 'House') {
        return House;
    } else if (iconName === 'Document') {
        return Document;
    } else if (iconName === 'Warning') {
        return Warning;
    } else if (iconName === 'Tickets') {
        return Tickets;
    } else if (iconName === 'DocumentRemove') {
        return DocumentRemove;
    } else if (iconName === 'IconMenu') {
        return IconMenu;
    } else if (iconName === 'Location') {
        return Location;
    } else if (iconName === 'Setting') {
        return Setting;
    } else if (iconName === 'Expand') {
        return Expand;
    } else if (iconName === 'Edit') {
        return Edit;
    }
    
    // 可以根据实际需要添加更多的图标判断和返回对应的组件
    return Expand;
};



onMounted(() => {
  console.log('HomeView mounted1',routes.value[0]);
});
</script>

<template>
  <div class="common-layout">
      <el-container>
          <el-aside class="el-aside" width="295px">
              <el-menu id="leftMenu" :default-openeds="['1']" :unique-opened="true" router>
                  <!-- 将home下的路由遍历设置为一级菜单-->
                  <template v-for="(routerItem, index) in routes[0].children" :key="index">
                      
                      <el-sub-menu v-if="routerItem.children && routerItem.children.length > 0 && routerItem.meta?.showInMenu!== false" :index="routerItem.name">
                          <template #title>
                              <el-icon> <component :is="getIconComponent(routerItem.meta?.icon)"></component></el-icon>
                              <span>{{ routerItem.meta?.title }}</span>
                          </template>
                          <!-- 遍历二级路由生成二级菜单 -->
                          <template v-for="(subRoute, subIndex) in routerItem.children" :key="subIndex">
                              <!-- 是否隐藏页面 -->
                              <el-menu-item  v-if="subRoute.meta?.isHidden !== true" :index="subRoute.path">
                                  <el-icon> <component :is="getIconComponent(subRoute.meta?.icon)"></component></el-icon>
                                  <span>{{ subRoute.meta?.title }}</span>
                              </el-menu-item>
                          </template>
                      </el-sub-menu>
                      <el-menu-item v-if="(!routerItem.children || routerItem.children.length === 0 )&& routerItem.path !== '/login'" :index="routerItem.path">
                          <el-icon> <component :is="getIconComponent(routerItem.meta?.icon)"></component></el-icon>
                          <span>{{ routerItem.meta?.title }}</span>
                      </el-menu-item>
                  </template>
              </el-menu>
          </el-aside>
          <el-container>
              <el-header>Header</el-header>
              <el-main>
                  <RouterView></RouterView>
              </el-main>
          </el-container>
      </el-container>
  </div>
</template>


<style scoped>
.common-layout {
  width: 100%;
  height: 100%;
}

.el-container {
  background: #F9F9FA;
}
.el-header {
  height: 100px;
  /* background: #FF0000; */
  border-radius: 10px;
  background: #FFFFFF;
}

.el-menu {
  height: 100vh;
  background:url('../assets/common/left_back.png');
  background-size: cover;
  /*设置菜单标题默认颜色 */
  /* --el-menu-bg-color: none; */
  /* 设置菜单项默认颜色 */
  /* --el-menu-hover-bg-color:none; */
  /* 菜单的文字颜色  */
  /* --el-menu-text-color: #FFFFFF; */
  /* 活动菜单项的文本颜色 */
  /* --el-menu-item-active-color: #59ACFD; */
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-main {
  height: calc(100vh - 100px);
}
</style>